<template> 
  <div v-if="isHorizontal" class="my-h-water-fall">
    <div class="item-warp" v-for="(item, index) in data" :key="index" :style="itemWarpStyle(item)" > 
      <div class="padding" :style="warpHeightStyle(item)"></div>
      <div class="content-warp">
        <slot :scope="item"></slot>
      </div>  
    </div> 
  </div>
 
</template>
<style lang="scss" scoped>
.content-warp{
  position: absolute;
  top: 0;
  width: 100%;
  bottom: 0;
  vertical-align: bottom; 
}
</style>
<script>
/**
 * 瀑布流组件
 * @module $ui/components/my-water-fall
 */

/**
 * 插槽
 * @member slots
 */
export default {
  name: 'MyWaterFall',
  mixins: [],
  components: {
  },
  /**
   * 属性参数
   * @member props
   * @property {Boolean} [isHorizontal] 是否横向布局，默认true， false 为纵向布局
   * @property {Object} [columns] 纵向布局时 显示列数，支持响应式对象设置 {xxl,xl,lg,md,sm,xs}
   */
  props: {
    isHorizontal: {
      type: Boolean,
      default: true
    },
    data: {
      type: Array,
      default: () => {
        return []
      }
    },
    itemHeight: {
      type: Number,
      default: 200
    },
    margin: {
      type: Number,
      default: 5
    }
     
  },
  data() {
    return {}
  },
  computed: {
  },
  methods: {
    itemWarpStyle(item) {
      return {
        margin: this.margin + 'px', 
        width: item.width * this.itemHeight / item.height + 'px', 
        flexGrow: item.width / item.height
      }
    },
    warpHeightStyle(item) {
      return {paddingBottom: `${item.height / item.width * 100}%`}
    } 
     
  },
  created() {},
  mounted() {
    
  }
}
</script>